<template>
<h1>预约处理</h1>
  <div style="margin-bottom: 50px">
    <el-button-group style="font-size: 40px">
      <el-button style="width: 200px; height: 50px" type="warning" @click="setStatus(1)">
        <el-icon><Warning /></el-icon>  新预约
      </el-button>
      <el-button style="width: 200px; height: 50px" type="success" @click="setStatus(2)">正在进行</el-button>
      <el-button style="width: 200px; height: 50px" type="warning" @click="setStatus(5)">已完成</el-button>
      <el-button style="width: 200px; height: 50px" type="danger" @click="setStatus(6)">未完成</el-button>
      <el-button style="width: 200px; height: 50px" type="info" @click="setStatus(4)">已拒绝</el-button>
      <el-button style="width: 200px; height: 50px" type="info" @click="setStatus(3)">用户取消</el-button>
    </el-button-group>
  </div>
  <div>
    <el-table
        :data="this.reservationList"
        style="width: 100%"
        stripe
        border
        highlight-current-row
    >
      <el-table-column prop="reservationId" label="预约号" />
      <el-table-column label="预约时间">
        <template v-slot="scope">
          {{ formatDate(scope.row.time) }}
        </template>
      </el-table-column>
      <el-table-column prop="projectId" label="项目ID" />
      <el-table-column prop="projectName" label="项目名" />
      <el-table-column prop="price" label="价格" />
      <el-table-column prop="userId" label="用户ID" />
      <el-table-column prop="username" label="用户名" />
      <el-table-column prop="petId" label="宠物名" />
      <el-table-column prop="petName" label="宠物名" />
      <el-table-column label="操作" width="120">
        <template v-slot="scope">
          <el-button @click="process(scope.row.reservationId,2)" link type="danger" size="large">确认</el-button>
          <el-button @click="process(scope.row.reservationId,4)" link type="danger" size="large">拒绝</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>


  <div class="pager">
    <el-pagination
        :default-page-size="this.page.pageSize"
        v-model:current-page="page.currentPage"
        background layout="prev, pager, next"
        :total="this.page.count"
        @current-change="this.queryReservationByPage"
    />
  </div>

</template>

<script>
import axios from "axios";
import {ElMessage} from "element-plus";

export default {
  name: "ReservationPage",
  data(){
    return{
      // 预约列表数据
      reservationList: [],
      // 分页数据
      page: {
        currentPage: 1,
        pageSize: 5,
        count: 0
      },
      // 查询参数
      queryParams: {
        status: 1,
      }
    }
  },
  methods:{
    setStatus(params){
      this.queryParams.status = params
      this.count()
      this.queryReservationByPage();
    },
    queryReservationByPage(){
      let url = "http://localhost:8088/reservation/get/" +this.queryParams.status+"/" +this.page.currentPage+"/" +this.page.pageSize;
      axios.get(url,{withCredentials:true})
          .then(res => {
            this.reservationList = res.data.data;
          })
    },
    count(){
      let url = "http://localhost:8088/reservation/count/" +this.queryParams.status
      axios.get(url,{withCredentials:true})
          .then(res => {
            this.page.count = res.data.data;
          })
    },
    formatDate(dateString) {
      const date = new Date(dateString);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    process(id,status){
      let url = 'http://localhost:8088/reservation/process/'+id+'/'+status;
      axios.get(url,{withCredentials:true})
          .then(res => {
            if (res.data.code == 200){
              ElMessage.success('处理成功')
              this.queryReservationByPage();
            }else {
              ElMessage.error('处理失败')
            }
          })
    }
  },
  mounted() {
    this.page.count = this.count();
    this.queryReservationByPage();
  }
}
</script>

<style scoped>

</style>